<script setup>
defineProps({
  title: String,
  value: [String, Number],
  unit: String,
  icon: String
});
</script>

<template>
  <div class="bg-white rounded-xl p-4 shadow-sm hover:shadow-md transition-shadow">
    <div class="flex items-center space-x-3">
      <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center">
        <span class="text-green-600 text-lg">{{ icon }}</span>
      </div>
      <div>
        <p class="text-sm text-gray-600">{{ title }}</p>
        <p class="text-lg font-semibold">
          {{ value }}{{ unit }}
        </p>
      </div>
    </div>
  </div>
</template>